<template>
  <div>
    <div class="common-tab-box">
      <div @click="change('row2left')" :class="{ 'active': activeName === 'row2left' }">投资</div>
      <div @click="change('row2center')" :class="{ 'active': activeName === 'row2center' }">消费</div>
      <div @click="change('row2right')" :class="{ 'active': activeName === 'row2right' }">进出口</div>
    </div>
    <KeepAlive>
      <component :is="componentId"></component>
    </KeepAlive>
  </div>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
import row2left from './row2left.vue'
import row2center from './row2center.vue'
import row2right from './row2right.vue'
export default {
  name: '',
  data () {
    return {
      componentId: 'row2left',
      activeName: 'row2left'
    }
  },
  components: {
    row2left,
    row2right,
    row2center
  },
  methods: {
    change (e) {
      this.activeName = e
      this.componentId = e
    }

  }
}
</script>
